<template>
    <div>
        <div class=page-title-section style="background-image:url(images/parallax-5.jpg)">
            <div class=container>
                <div class="center-holder page-title">
                    <h1>{{data.title}}</h1>
                    <p style="color: white;">{{data.content}}</p>
                </div>
            </div>
        </div>

        <div class="section-block">
            <div class="container" v-if="data">
                <div class=row>
                    <!--                    <div class="col-xs-12 col-md-8 col-sm-8">-->
                    <div class="col-xs-12 col-md-12 col-sm-12">
                        <div class=blog-post>
                            <h4>{{data.title}}</h4>
                            <div class="blog-post-info">
                                <i class="icon-users"></i>
                                <span>{{data.author || '--'}}</span>
                            </div>
                            <div class="blog-post-info">
                                <i class="icon-calendar-6"></i>
                                <span>{{new Date(data._createTime).Format('yyyy年MM月dd日')}}</span>
                            </div>
                            <div class="blog-post-info">阅读量<span>{{data.readingNumber || 0 }}</span></div>
                            <div v-html="data.text"></div>
                            <div class=blog-post-share>
                                <!--                                <div class=row>-->
                                <!--                                    <div class="col-md-6 col-sm-6 col-xs-6 left-holder">-->
                                <!--                                        <a href=#>Business,</a>-->
                                <!--                                        <a href=#>Marketing,</a>-->
                                <!--                                        <a href=#>Finance</a>-->
                                <!--                                    </div>-->
                                <!--                                    <div class="col-md-6 col-sm-6 col-xs-6 right-holder share-icons">-->
                                <!--                                        <a href=#><i class="fa fa-facebook"></i></a>-->
                                <!--                                        <a href=#><i class="fa fa-twitter"></i></a>-->
                                <!--                                        <a href=#><i class="fa fa-instagram"></i></a>-->
                                <!--                                        <a href=#><i class="fa fa-pinterest"></i></a>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                    </div>
                    <!--                    <div class="col-xs-12 col-md-4 col-sm-4">-->
                    <!--                        <div class="blog-post-left categories"><h4>Category</h4>-->
                    <!--                            <ul>-->
                    <!--                                <li><a href=#>Business <span>(7)</span></a></li>-->
                    <!--                                <li><a href=#>Marketing <span>(4)</span></a></li>-->
                    <!--                                <li><a href=#>Office <span>(5)</span></a></li>-->
                    <!--                                <li><a href=#>Managment <span>(4)</span></a></li>-->
                    <!--                                <li><a href=#>Public <span>(4)</span></a></li>-->
                    <!--                                <li><a href=#>Finance <span>(6)</span></a></li>-->
                    <!--                                <li><a href=#>People <span>(4)</span></a></li>-->
                    <!--                            </ul>-->
                    <!--                        </div>-->
                    <!--                        <div class="blog-post-left about">-->
                    <!--                            <h4>About Us</h4>-->
                    <!--                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have-->
                    <!--                                suffered alteration-->
                    <!--                                in some form, by injected humour, or randomised words which don't look even slightly-->
                    <!--                                believable.-->
                    <!--                            </p>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Information",
        data() {
            return {
                data: {}
            }
        },
        mounted() {
            const prop = this.$route.query;
            if (prop.item) {
                const data = JSON.parse(decodeURIComponent(prop.item))
                this.data = data;
            }
        },
        methods: {}
    }
</script>

<style scoped>

</style>